<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽选中复选框</title>
    <style>
        * {
            user-select: none;
        }
        
        ul {
            position: relative;
            width: 300px;
            height: auto;
            margin: 0 auto;
            padding: 100px;
        }
        
        li {
            display: inline-block;
            margin: 5px;
        }
        
        input {
            width: 30px;
            height: 30px;
        }
        
        #moveSelected {
            position: fixed;
            top: 0;
            left: 0;
            border: 1px dashed #2783F5;
            pointer-events: none;
            display: none;
        }
    </style>
</head>

<body>
    <ul id="box">
        <!-- 选区 -->
        <li id="moveSelected"></li>
    </ul>
</body>

</html>
<script>
    window.onload = function() {
        let flag = false; //是否开启拖拽
        let oldLeft = 0; //鼠标按下时的位置
        let oldTop = 0;
        let box = document.getElementById('box') //操作区
        let moveSelected = document.getElementById("moveSelected"); //选区
        // 动态渲染li和checkbox
        for (let i = 0; i < 24; i++) {
            let newLi = document.createElement("li");
            newLi.innerHTML = '<input type="checkbox">';
            box.append(newLi);
        }
        let checkboxs = box.getElementsByTagName("input"); //复选框
        // 鼠标按下时开启拖拽，给选区设置定位
        box.onmousedown = function(e) {
                flag = true;
                moveSelected.style.top = e.pageY + 'px';
                moveSelected.style.left = e.pageX + 'px';
                oldLeft = e.pageX;
                oldTop = e.pageY;
                moveSelected.style.display = 'block'
            }
            // 鼠标移动时计算选区的位置和大小
        box.onmousemove = function(e) {
                if (!flag) return;
                if (e.pageX < oldLeft) { //表示左移
                    moveSelected.style.left = e.pageX + 'px';
                    moveSelected.style.width = (oldLeft - e.pageX) + 'px'; //向左移动的距离作为选区的宽
                } else {
                    moveSelected.style.width = (e.pageX - oldLeft) + 'px';
                }
                if (e.pageY < oldTop) { //向上移动
                    moveSelected.style.top = e.pageY + 'px';
                    moveSelected.style.height = (oldTop - e.pageY) + 'px';
                } else {
                    moveSelected.style.height = (e.pageY - oldTop) + 'px';
                }
                //通过得到的left和top加上元素自身的宽高来计算选区的right和bottom
                moveSelected.style.bottom = Number(moveSelected.style.top.split('px')[0]) + Number(moveSelected.style.height.split('px')[0]) + 'px';
                moveSelected.style.right = Number(moveSelected.style.left.split('px')[0]) + Number(moveSelected.style.width.split('px')[0]) + 'px';
                //找出选中的区域并激活
                for (let i = 0; i < checkboxs.length; i++) {
                    //计算每个checkbox的位置信息
                    let left = checkboxs[i].offsetLeft + box.offsetLeft;
                    let right = checkboxs[i].offsetWidth + left;
                    let top = checkboxs[i].offsetTop + box.offsetTop;
                    let bottom = checkboxs[i].offsetHeight + top;
                    //判断是否在选择区
                    let leftCover = moveSelected.style.left.split('px')[0] <= left && left <= moveSelected.style.right.split('px')[0];
                    let rightCover = moveSelected.style.left.split('px')[0] <= right && right <= moveSelected.style.right.split('px')[0];
                    let topCover = moveSelected.style.top.split('px')[0] <= top && top <= moveSelected.style.bottom.split('px')[0];
                    let bottomCover = moveSelected.style.top.split('px')[0] <= bottom && bottom <= moveSelected.style.bottom.split('px')[0];
                    if ((leftCover || rightCover) && (topCover || bottomCover)) {
                        checkboxs[i].checked = true; //激活复选框
                    }
                }
            }
            //鼠标抬起时重置选区
        box.onmouseup = function(e) {
                if (!flag) return;
                flag = false;
                moveSelected.style.width = 0;
                moveSelected.style.height = 0;
                moveSelected.style.top = 0;
                moveSelected.style.left = 0;
                moveSelected.style.bottom = 0;
                moveSelected.style.right = 0;
                moveSelected.style.display = 'none'
            }
            // 鼠标超出操作区重置选区
        box.onmouseleave = function(e) {
            flag = false;
            moveSelected.style.width = 0;
            moveSelected.style.height = 0;
            moveSelected.style.top = 0;
            moveSelected.style.left = 0;
            moveSelected.style.bottom = 0;
            moveSelected.style.right = 0;
        }
    }
</script>